<template>
	<view :style="{'--color': color}">
		<view class="topBg bg00 p-re">
			<view class="card thmeBg bor_radius_30 p-ab white">
				<image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
				<view class="size26 bold padding30">{{ pageData.agent_name }}</view>
				<view class="d-flex m-bot30">
					<view class="text-center w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.allStoreNum }}</text>个</view>
						<view>辖区店铺</view>
					</view>
					<view class="text-center w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.allOrderNum }}</text>单</view>
						<view>辖区总单量</view>
					</view>
					<view class="text-center w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.allOrderMoney }}</text>元</view>
						<view>辖区总流水</view>
					</view>
				</view>
				<view class="d-flex j-se">
					<view class="text-center w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.mOrderNum }}</text>单</view>
						<view>上月单量</view>
					</view>
					<view class="text-center w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.mOrderMoney }}</text>元</view>
						<view>上月流水</view>
					</view>
					<view class="text-center w-333" @click.stop="toWiths">
						<view class="h7"><text class="size36 m-right4">{{ pageData.mIncome }}</text>元</view>
						<view class="p-re">上月收益<text class="iconfont icon-a-032 size40 p-ab" v-if="agency == 0"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding20 m-top50">
			<!-- <view class="size30 color_33 bold p-left20 p-bot20">辖区店铺</view> -->
			<view class="d-flex p-left20 m-bot30">
				<view class="flex-1 size30 color_33 bold">辖区店铺</view>
				<view class="padding6-20 thmeBg bor_radius_10 white" @click="toUrl('/joinPage/addStore')"
					v-if="storeList.length">添加店铺</view>
			</view>
			<view class="item bgf8 bor_radius_6 padding20 d-flex m-bot20" v-for="(item,index) in storeList" :key="index"
				@click="tostoreDetail(item)">
				<image :src="$imgUrls(item.logo)" mode="aspectFill" class="bor_radius_10"></image>
				<view class="p-left20 flex-1">
					<view class="d-flex m-bot10">
						<view class="flex-1">
							<text class="label m-right10 d-inline-block" v-if="item.bussName">{{ item.bussName }}</text>
							<text class="size28 color_33 bold m-right10">{{ item.name }}</text>
						</view>
						<text class="iconfont icon-tubiao09 thmeColor"
							@click.stop="toUrl('/joinPage/addStore?store_id=' + item.shop_id)"
							v-if="item.status == 0"></text>
					</view>

					<view class="d-flex j-sb a-center m-bot10">
						<view class="h6 color_66 flex-1 m-right10">{{ item.address }}</view>
						<view class="size26 color_6d">{{ item.distance }}km</view>
					</view>
					<view class="d-flex j-sb color_66">
						<view class="text-center">
							<view class="size32">{{ item.mOrderNum }}</view>
							<view class="size22">上月单量(单)</view>
						</view>
						<view class="text-center">
							<view class="size32">{{ item.mOrderMoney }}</view>
							<view class="size22">上月流水(元)</view>
						</view>
						<view class="text-center">
							<view class="size32 color_FOD">{{ item.mIncome }}</view>
							<view class="size22">上月收益(元)</view>
						</view>
					</view>
				</view>
			</view>

			<empty v-if="noData" cat='3' msg='暂还没有相关的店铺'></empty>
		</view>

		<view v-if="noData" class="btn flexac thmeBg bor_radius_10 size30 white" @click="toUrl('/joinPage/addStore')">
			添加店铺</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['agent_id'],
		data() {
			return {
				imgUrl: this.imgUrl,
				pageData: '',
				storeList: [],
				noData: false,
				showaddStore: false,
			}
		},
		async created() {
			this.getAgentInfo()
			if (this.position.longitude == 0) {
				await this.$pop.getLocation()
				if (this.position.longitude) this.getAgentInfo()
			}
			// this.getAgent()
			// if (this.position.longitude == 0) {
			// 	await this.$pop.getLocation()
			// 	if (this.position.longitude) this.getAgent()
			// }
		},
		methods: {
			getAgentInfo() {
				this.$http.post({
					url: '/userAgentApi/getAgentInfo',
					data: {
						agent_id: this.agent_id
					}
				}).then(res => {
					if (res.errcode != '100') return this.$Toast(res.msg)
					this.pageData = res.agentInfo
					this.storeList = res.data || []
					if (!this.storeList.length) this.noData = true
				})

			},
			tostoreDetail(Item) {
				if (Item.status == 0) return;
				this.toUrl(`/joinPage/storeDetails?store_id=${Item.shop_id}&agent_id=${this.agent_id}&getType=3`)
			},


			// getAgent() { // 经纬度默认会传
			// 	this.$http.post({
			// 		url: '/osmxcxApi/getAgent',
			// 		data: {
			// 			agent_id: this.agent_id
			// 		}
			// 	}).then(res => {
			// 		this.pageData = res.data.agentInfo
			// 		this.storeList = res.data.storeFind || []
			// 		if (!this.storeList.length) this.noData = true
			// 	})
			// },
			toWiths() {
				if (this.agency == 1) return
				this.toUrl(`/moneyPage/capital/withdraws`)
			}
		},
		computed: {
			...mapState(['color', 'position']),
		},

	}
</script>

<style lang="scss" scoped>
	.topBg {
		height: 300rpx;

		.card {
			width: 690rpx;
			height: 320rpx;
			left: 30rpx;
			top: 30rpx;
			z-index: 10;

			image {
				top: 0;
				left: 0;
				z-index: -1; // 解决点击失效问题
			}

			.icon-a-032 {
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.item {
		image {
			width: 120rpx;
			height: 120rpx;
		}

		.label {
			padding: 4rpx 10rpx;
			background: #990000;
			border-radius: 10rpx;
			font-size: 22rpx;
			color: #fff;
		}
	}

	.btn {
		width: 260rpx;
		height: 80rpx;
		margin: 40rpx auto 0;
	}
</style>